<template>
  <div class="app">
    <div class="title">
      <h1>马踏棋盘</h1>
    </div>
    <chessboard :path="displayPath" :knightPosition="currentKnightPosition" />
    <!-- 输入框 -->
    <div class="inputContainer">
      <label for="start-point">起始位置：</label>
      <el-input v-model="startPoint" id="start-point" type="text" style="width: 200px;" placeholder="请输入如 4,4" />
      <button :plain="true" @click="startGame">开始游戏</button>
    </div>
    <!-- 滑块 -->
    <div class="slider-container">
      <el-slider v-model="step" :min="1" :max="path.length > 0 ? path.length : 1" :step="1" />
      <div>当前步数: {{ step }}</div>
    </div>
  </div>
</template>
 
<script setup>
import chessboard from './components/chessboard.vue'
import { ElMessage, ElInput, ElSlider } from 'element-plus'
import { ref, computed } from 'vue'

const startPoint = ref(''); // 起始点输入
const step = ref(1); // 当前步数
const path = ref([]); // 存储路径的所有步
const currentKnightPosition = ref({ x: 0, y: 0 }); // 当前马的位置
const displayPath = computed(() => path.value.slice(0, step.value)); // 动态计算显示的路径

// 预设所有合法移动方向
const directions = [
  { x: 2, y: 1 }, { x: 2, y: -1 }, { x: -2, y: 1 }, { x: -2, y: -1 },
  { x: 1, y: 2 }, { x: 1, y: -2 }, { x: -1, y: 2 }, { x: -1, y: -2 },
];

// 计算移动路径
const calculateKnightPath = (start) => {
  const pathArr = [{ ...start, step: 1 }]; // 存储路径的数组，包含步数
  const visited = Array.from({ length: 8 }, () => Array(8).fill(false)); // 访问标记
  visited[start.y][start.x] = true;

  let current = start;
  let currentStep = 2; // 步数从 2 开始

  // 最大64步，保证棋盘上的每个位置都能访问
  for (let i = 1; i < 64; i++) {
    let nextMove = null;

    // 寻找下一个未访问的位置
    for (const { x: dx, y: dy } of directions) {
      const nx = current.x + dx;
      const ny = current.y + dy;

      if (nx >= 0 && nx < 8 && ny >= 0 && ny < 8 && !visited[ny][nx]) {
        nextMove = { x: nx, y: ny, step: currentStep };// 为每一步赋步数
        break;
      }
    }

    // 如果找不到合法的下一个位置，说明无法完成完整的路径
    if (!nextMove) break;

    // 更新路径和访问标记
    pathArr.push(nextMove);
    visited[nextMove.y][nextMove.x] = true;
    current = nextMove;
    currentStep++; // 步数递增
  }

  return pathArr;
}

// 获取用户输入并开始游戏
const startGame = () => {
  const [x, y] = startPoint.value.split(',').map(Number);
  if (x >= 0 && x < 8 && y >= 0 && y < 8) {
    const start = { x, y };
    path.value = calculateKnightPath(start);
    ElMessage({
      message: '已成功设置初始位置',
      type: 'success',
    })
    step.value = 1; // 重置步数
  } else {
    ElMessage.error('起始位置必须在棋盘范围内');
  }
}













</script>




<style scoped>
.app {
  display: flex;
  flex-direction: column;
  /* 竖直排列 */
  align-items: center;
  /* 水平居中 */
  justify-content: flex-start;
  /* 顶部对齐 */
  gap: 20px;
  /* 给元素之间增加间距 */
}

.title {
  width: 100%;
  text-align: center;
  /* 标题居中 */
  margin-top: 20px;
  /* 顶部间距 */
}

.inputContainer {
  display: flex;
  align-items: center;
  /* 输入框和按钮垂直居中 */
}

input {
  margin-right: 5px;
  /* 输入框和按钮间隔 */
}
</style>
